<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <common-item1
          :query="query"
          :streetList="streetList"
          :communityList="communityList"
          :villageList="villageList"
          @visibleChangeStreet="visibleChangeStreet"
          @changeStreet="changeStreet"
          @visibleChangeCommunity="visibleChangeCommunity"
          @changeCommunity="changeCommunity"
          @visibleChangeVillage="visibleChangeVillage"
          @changeVillage="changeVillage"
          :showInput="true"
          :show="true"
        />
        <!-- <el-select
          @visible-change="visibleChangeStreet"
          @change="changeStreet"
          v-model="query.streetId"
          placeholder="请选择街道"
          class="handle-select mr10"
        >
          <el-option
            v-for="(item, index) in streetList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
          
        </el-select>

        <el-select
          @visible-change="visibleChangeCommunity"
          @change="changeCommunity"
          v-model="query.communityId"
          placeholder="请选择社区"
          class="handle-select mr10"
        >
          <el-option
            v-for="(item, index) in communityList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
          
        </el-select>

        <el-select
          @visible-change="visibleChangeVillage"
          @change="changeVillage"
          v-model="query.villageId"
          placeholder="请选择小区"
          class="handle-select mr10"
        >
          <el-option
            v-for="(item, index) in villageList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
          
        </el-select> -->

        <el-input
          v-model="query.mobile"
          placeholder="请输入手机号"
          class="handle-input mr10"
          maxlength="11"
        ></el-input>
        <el-input
          v-model="query.name"
          placeholder="请输入姓名"
          class="handle-input mr10"
        ></el-input>

        <div class="block" style="float: left">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-button
          type="primary"
          style="margin-left: 10px;"
          @click="handleSearch"
          >查询</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="index"
          label="序号"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nickname"
          align="center"
          label="昵称"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="真实姓名"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          align="center"
          label="手机号"
        ></el-table-column>

        <el-table-column align="center" label="用户所属小区/村">
          <template slot-scope="scope">{{
            scope.row.householdDTO ? scope.row.householdDTO.villageName : ""
          }}</template>
        </el-table-column>

        <el-table-column align="center" label="用户详细住址">
          <template slot-scope="scope">{{
            scope.row.householdDTO
              ? scope.row.householdDTO.buildingNo +
                "栋" +
                scope.row.householdDTO.unitNo +
                "单元" +
                scope.row.householdDTO.houseNumber +
                "室"
              : ""
          }}</template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          align="center"
          label="注册时间"
        ></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleUnbundling(scope.$index, scope.row)"
              v-if="suPermissions.includes('wx:user:update')"
              >解绑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { commonItem1 } from "../../common/commonItem1/common-item1.js";
export default {
  name: "sysuser",
  data() {
    return {
      suPermissions: [],
      query: {
        streetId: "",
        communityId: "",
        villageId: "",

        buildingNum: "",
        unitNum: "",
        houseNum: "",

        streetName: "",
        communityName: "",
        villageName: "",

        mobile: "",
        name: "",
        pageIndex: 1,
        pageSize: 20,
        address: "",
      },
      streetList: [],
      communityList: [],
      villageList: [],

      tableData: [],
      multipleSelection: [],
      delList: [],
      pageTotal: 0,
      id: -1,
      value2: "",
      deleteStatus: 0,
    };
  },
  created() {
    this.getData({});
    this.suPermissions = this.permissions;
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (newVal == "/sys-user") {
        this.suPermissions = this.permissions;
      }
    },
    // 刷新浏览器时触发
    permissions: function(newVal, oldVal) {
      this.suPermissions = newVal;
    },
  },
  components: {
    "common-item1": () => import("../../common/commonItem1/common-item1.vue"),
  },
  methods: {
    ...commonItem1,
    // 获取数据
    getData({
      mobile = "",
      name = "",
      villageId = "",
      createDate1 = "",
      createDate2 = "",
      buildingNo = this.query.buildingNum,
      unitNo = this.query.unitNum,
      houseNumber = this.query.houseNum,
    }) {
      this.$axios
        .get("/wx/user/page", {
          params: {
            page: this.query.pageIndex,
            limit: this.query.pageSize,
            mobile,
            name,
            villageId,
            createDate1,
            createDate2,
            buildingNo,
            unitNo,
            houseNumber,
          },
        })
        .then(({ data: res }) => {
          console.log("用户管理", res);
          if (res.code != 0) {
            return;
          }
          this.tableData = res.data.list;
          this.tableData.map((item, index) => {
            item.address =
              item.province +
              item.city +
              item.district +
              item.town +
              item.village +
              item.villageName +
              item.umberPlate;

            item.createDate = this.dateFormat(item.createDate);
            var pageIndex = this.query.pageIndex;
            item.index = index + 1 + (pageIndex - 1) * this.query.pageSize;
          });
          this.pageTotal = res.data.total || 0;
        });
    },
    // 触发查询按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      console.log(
        this.query.streetId.trim() ||
          this.query.mobile.trim() ||
          this.query.name.trim() ||
          this.value2[0]
      );
      if (
        !this.query.streetId.trim() &&
        !this.query.mobile.trim() &&
        !this.query.name.trim() &&
        !this.value2 &&
        !this.query.buildingNum &&
        !this.query.unitNum &&
        !this.query.houseNum
      ) {
        return this.$message.warning({
          message: "请选择条件查查询",
          duration: 1500,
        });
      }
      if (
        (this.query.buildingNum || this.query.unitNum || this.query.houseNum) &&
        !this.query.villageId
      ) {
        return this.$message.warning({
          message: "请选择选择小区",
          duration: 1500,
        });
      }

      this.getData({
        villageId: this.query.villageId,
        mobile: this.query.mobile,
        name: this.query.name,
        createDate1: this.value2
          ? new Date(this.value2[0].toString()).getTime()
          : "",
        createDate2: this.value2
          ? (this.value2[1].getTime() + (24 * 3600 * 1000 - 1000)).toString()
          : "",
        buildingNo: this.query.buildingNum,
        unitNo: this.query.unitNum,
        houseNumber: this.query.houseNum,
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 解绑操作
    handleUnbundling(index, row) {
      // 二次确认删除
      this.$confirm("确定要解绑吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.unbundling(index, row);
        })
        .catch(() => {});
    },
    unbundling(index, row) {
      this.$axios
        .put("/wx/user", {
          id: row.id,
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error({
              message: res.msg,
              duration: 1500,
            });
          }
          this.getData({});
          this.$message.success({
            message: "解绑成功",
            duration: 1500,
          });
        })
        .catch((err) => {});
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getData({});
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData({
        villageId: this.query.villageId,
        mobile: this.query.mobile,
        name: this.query.name,
        createDate1: this.value2
          ? new Date(this.value2[0].toString()).getTime()
          : "",
        createDate2: this.value2
          ? (this.value2[1].getTime() + (24 * 3600 * 1000 - 1000)).toString()
          : "",
        buildingNo: this.query.buildingNum,
        unitNo: this.query.unitNum,
        houseNumber: this.query.houseNum,
      });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  /* display: flex;
  justify-content: flex-start; */
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 150px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.handle-del {
  margin-left: 10px;
}
.mr10 {
  margin-right: 10px;
  float: left;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
